<template>
  <div class="box" style="height:150vh">{{ a + b }}</div>
  <div>
    <button @click="add">添加</button>
    <button @click="go1">页面1</button>
    <button @click="go2">页面2</button>
    <button @click="forward">前进</button>
    <button @click="back">浏览器返回阻止，弹框</button>
    <button @click="goHome">去首页</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    goHome() {
      this.$router.push({
        name: 'index'
      })
    },
    add() {
      console.log(`helloworld`)
      this.a++
    },
    forward() {
      history.forward()
    },
    go1() {
      this.$router.push({
        name: 'daydayup',
        query: {
          t: '241129_1'
        }
      })
    },
    go2() {
      this.$router.push({
        name: 'daydayup',
        query: {
          t: '241129_2'
        }
      })
    },
    back() {
      //history.back()
      //this.$router.go(-1)
      this.$router.replace({
        name: 'index'
      })
    },
    handler(event) {
      history.push(null, null, location.href)
      //alert(`位置：${document.location}，状态：${JSON.stringify(event.state)}`)
      console.log(`位置：${document.location}，状态：${JSON.stringify(event.state)}`)
    }
  },
  mounted() {
    //window.addEventListener('popstate', this.handler)
  },
  unmounted() {
    //window.removeEventListener('popstate', this.handler)
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
